<template>
	<view>
		<view class="gift_bg">
			<view class="gift_date">
				<view class="example-body">
					<uni-datetime-picker v-model="range" type="daterange" @change="changeLog"/>
				</view>
			</view>
			<view class="gift_total">
				<view class="gift_t_item gift3" @click="changeType(0)">
					<view class="gift_nav" :class="{'gift_nav_active':type==0}">全部</view>
				</view>
				<view class="gift_t_item gift3" @click="changeType(1)">
					<view class="gift_nav" :class="{'gift_nav_active':type==1}">99</view>
				</view>
				<view class="gift_t_item gift3" @click="changeType(2)">
					<view class="gift_nav" :class="{'gift_nav_active':type==2}">其它</view>
				</view>
			</view>
			<view class="gift_total">
				<view class="gift_t_item">
					<view>合计单数</view>
					<view class="gift_t_num">{{info.cut}}</view>
				</view>
				<view class="gift_t_item">
					<view>今日单数</view>
					<view class="gift_t_num">{{info.todayNum}}</view>
				</view>
				<view class="gift_t_item">
					<view>昨日单数</view>
					<view class="gift_t_num">{{info.yesNum}}</view>
				</view>
				<view class="gift_t_item">
					<view>合计金额</view>
					<view class="gift_t_num">{{info.price}}</view>
				</view>
			</view>
		</view>
		<view class="gift_list">
			<view class="gift_item" v-for="item in list">
				<view class="gift_info">
					<image :src="item.thumb"></image>
					<view class="gift_desc">
						<view class="gift_tit clamp">{{item.goodstitle}}</view>
						<view>价格：￥{{item.realprice}}</view>
						<view>购买日期：{{item.paytime}}</view>
					</view>
				</view>
				<view><text class="gift_name">购买人及ID：</text><text class="gift_con">（{{item.mid}}）{{item.nickname}}</text></view>
				<view><text class="gift_name">上级及ID：</text><text class="gift_con">（{{item.pmid}}）{{item.pnickname}}</text></view>
				<view><text class="gift_name">订单排名：</text><text class="gift_con aggravation">{{item.ranking}}</text></view>
				<view><text class="gift_name">补贴金额：</text><text class="gift_con aggravation">￥{{item.ratemoney}}</text></view>
				<view><text class="gift_name">已补贴金额：</text><text class="gift_con aggravation">￥{{item.sendmoney}}</text></view>
				<view><text class="gift_name">待补贴金额：</text><text class="gift_con aggravation">￥{{item.money}}</text></view>
			</view>
		</view>
		<view class="empty_loading">
			<image v-if="isloading" src="/static/business/loading.gif" mode=""></image>
			<view v-if="ismore">到底了~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: ['',''],
				list: [],
				info: [],
				page: 0,
				isloading: false,
				ismore: false,
				type: 0,
			};
		},
		onLoad() {
			this.getTotal();
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			changeType(id){
				if(id == this.type) return;
				this.type = id;
				this.page = 0;
				this.list = [];
				this.getList();
				this.getTotal();
			},
			changeLog(e){
				if(e.length<=0) this.range = ['',''];
				this.page = 0;
				this.list = [];
				this.getTotal();
				this.getList();
			},
			getTotal(){
				this.$axios('statistics/gifts','POST','member',{
					begin: this.range[0],
					end: this.range[1],
					type: this.type
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.info = res.data.data;
					}
				})
			},
			getList(){
				this.page++;
				this.isloading = true;
				this.$axios('statistics/giftList','POST','member',{
					page: this.page,
					begin: this.range[0],
					end: this.range[1],
					type: this.type
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.list = [...this.list,...res.data.data.list];
						this.ismore = res.data.data.list.length<=0;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #FBF8FE;
	padding-bottom: 100rpx;
}
.gift_bg{
	background: linear-gradient( 180deg, #E3C7FF 0%, #F0E1FF 100%);
}
.gift_date{
	margin: 0 20rpx;
	background: #fff;
	border-radius: 4px;
}
.gift_total{
	display: flex;
	justify-content: space-around;
	padding: 24rpx 0;
	.gift_t_item{
		font-size: 24rpx;
		color: #666666;
		text-align: center;
		.gift_t_num{
			font-size: 32rpx;
			font-weight: 600;
			margin-top: 10rpx;
			color: #333;
		}
		.gift_nav{
			font-size: 28rpx;
			margin-bottom: -18rpx;
			border-radius: 16rpx;
			padding: 10rpx 0;
			border: 2rpx solid #8615E1;
			color: #8615E1;
			margin-top: 10rpx;
		}
		.gift_nav_active{
			color: #fff;
			background: #9532E4;
		}
	}
	.gift3{
		width: 26%;
	}
}
.gift_list{
	padding: 20rpx;
	.gift_item{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 24rpx;
		line-height: 46rpx;
		color: #6d6a6a;
		margin-bottom: 20rpx;
		.gift_info{
			display: flex;
			align-items: center;
			line-height: 36rpx;
			border-bottom: 1rpx solid #DEDEDE;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			image{
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}
			.gift_desc{
				padding-left: 20rpx;
				width: calc(100% - 110rpx);
				.gift_tit{
					font-weight: 600;
					color: #333333;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
